<template>
    <aside class="sidebar">
        <div class="avatar">
            <img :src="bodyPic" title="Vayne"/>
        </div>
        <span id="typed"></span>
        <nav class="nav">
            <a href="#info">资料</a>
            <a href="#skills">技能</a>
<!--            <a href="#works">作品</a>-->
            <a href="#story">经历</a>
            <a href="#luck">缘起</a>
        </nav>
    </aside>
    <main>
        <section id="info">
            <div class="wrap">
                <h2 class="title">个人简介</h2>
                <div class="row">
                    <div class="col-l-4">
                        <p v-for="(tm,index) in info" key="index">
                            {{tm.k}} : {{tm.v}}
                        </p>
                    </div>
                    <div class="col-l-4">
                        <p>博客：<a href="https://74819v04x4.zicp.fun/">Recall Box</a></p>
                        <p>Gitee：<a href="https://gitee.com/lol_liutao">J</a></p>
                    </div>
                    <div class="col-l-4">
                        <p>
                            我是一个程序员，专注于软件开发和编程。我拥有广泛的编程知识和技能，擅长多种编程语言如Java、Python和Go。我熟悉各种开发工具和框架，并具备解决问题和优化代码的能力。我喜欢挑战自己并不断学习新技术和理念，以提高自己的编程能力。我注重代码的可读性和可维护性，并且善于合作和团队合作。我相信通过编程可以创造出有用的和有意义的解决方案，提升用户体验和解决现实世界的问题。</p>
                    </div>
                </div>
            </div>
        </section>
        <section id="skills">
            <div class="wrap">
                <h2 class="title">掌握技能</h2>
                <div class="row scrollable">
                    <div class="col-s-6 col-m-4 center-fixed" >
                        <vue-danmaku ref="danmaku" v-model:danmus="danmus" :debounce="80" :top="10" :right="100" :speeds="100" useSlot loop :channels="5"  class="danmkdul">
                            <template v-slot:dm="{ index, danmu }">
                                <span class="gradient-text">{{ danmu.name }}</span>
                            </template>
                        </vue-danmaku>
                    </div>
                </div>
            </div>
        </section>
        <section id="story">
            <div class="wrap">
                <h2 class="title">个人经历</h2>
                <div class="row">
                    <div class="col-m-8">
                        <ul class="timeline">
                            <li v-for="(itm ,index) in  works">
                                {{itm.time}} : {{itm.name}}-{{itm.position}}
                                <p v-for="(itms,index) in itm.result">
                                    {{itms}}
                                </p>
                            </li>
                        </ul>
                    </div>
                    <div class="col-m-4 center-fixed">
                        <img :src="heard"/>
                    </div>
                </div>
            </div>
        </section>
        <section id="luck" class="content-d">
            <div class="wrap">
                <h2 class="title">一切随缘</h2>
                <div class="row">
                    <div class="col-m-12">
                        <div class="wmytj" ref="dh" @click="luck"></div>
                        <div class="jt"></div>
                    </div>
                    <div class="col-m-12" v-show="!showInatory">
                        <Card>
                            <Row>
                                <Col span="24">
                                    <h2>{{divinatoryWords.name}}--{{divinatoryWords.composition}}</h2>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="24">
                                    <h4>卦象: {{divinatoryWords.explanation}}-{{divinatoryWords.grade}}</h4>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="24">
                                    <h4>推断: {{divinatoryWords.infer}}</h4>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="24">
                                    <h4>卦辞: {{divinatoryWords.hexagram}}</h4>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="24">
                                    <h4>象辞: {{divinatoryWords.elephant}}</h4>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="24">
                                    <h4>运势: {{divinatoryWords.fortune}}</h4>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="24">
                                    <h4>爱情: {{divinatoryWords.love}}</h4>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="24">
                                    <h4>疾病: {{divinatoryWords.disease}}</h4>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="24">
                                    <h4>失物: {{divinatoryWords.lostArticles}}</h4>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="24">
                                    <h4>诉讼：{{divinatoryWords.litigation}}</h4>
                                </Col>
                            </Row>
                        </Card>
                    </div>
                </div>
            </div>
        </section>
        <footer>
            <p>© 2023.</p>
        </footer>
    </main>
    <div class="copyrights" id="links20210126">
        Collect from <a href="http://www.cssmoban.com/" title="网站模板">模板之家</a>
        <a href="http://cooco.net.cn/" title="组卷网">组卷网</a>
    </div>
</template>
<script>
import Typed from "typed.js";
import {infoTypes} from "@/js/constants.js";
import("../../public/static/kico.js");
import vueDanmaku from 'vue3-danmaku'
// import Gossip from "../components/Gossip.vue";

import {toRaw} from "@vue/reactivity";
import { ref } from 'vue'

// import("../../public/static/moreduo.js");


export default {
    name: "Resume",
    // setup(props){
    //     const danmus = ref(['danmu1', 'danmu2', 'danmu3', 'danmu4', 'danmu5', 'danmu6', 'danmu7', 'danmu8']);
    //     return {danmus};
    // },
    data() {
        return {
            heard: require("../assets/heard1.png"),
            bodyPic: require("../assets/heardleft.jpg"),
            gossips: require("../../public/static/gossip.json"),
            info: [],
            danmus: [],
            works:[],
            divinatoryWords:"",
            divinatory: [],
            showInatory: true,
        };
    },
    components: { vueDanmaku },
    methods: {
        luck() {
            if (!this.divinatoryWords) {
                this.divinatoryWords = JSON.parse(localStorage.getItem("gossips"));
                if (!this.divinatoryWords) {
                    this.divinatoryWords = this.gossips[Math.round(Math.random() * 63)];
                    localStorage.setItem("gossips", JSON.stringify(this.divinatoryWords));
                }
                this.divinatory = this.divinatoryWords["code"].split("");
            }
            this.showInatory = false;
        },
        initCanvas() {
            var bbb = document.createElement("canvas");
            bbb.setAttribute("width",'200px');
            bbb.setAttribute("height",'200px');
            bbb.setAttribute("class",'mytj');
            this.$refs.dh.appendChild(bbb);
            var mt = bbb.getContext('2d');
            //左边黑色大半圆
            mt.beginPath();
            mt.arc(100, 100, 80, 90 * Math.PI / 180, 270 * Math.PI / 180, false);
            mt.fillStyle = '#000';
            mt.fill();

            //右边白色大半圆
            mt.beginPath();
            mt.arc(100, 100, 80, 270 * Math.PI / 180, 90 * Math.PI / 180, false);
            mt.fillStyle = '#fff';
            mt.fill();

            //左边白色中半圆
            mt.beginPath();
            mt.arc(100, 60, 40, 90 * Math.PI / 180, 270 * Math.PI / 180, false);
            mt.fillStyle = '#fff';
            mt.fill();

            //右边黑色中半圆
            mt.beginPath();
            mt.arc(100, 140, 40, 270 * Math.PI / 180, 90 * Math.PI / 180, false);
            mt.fillStyle = '#000';
            mt.fill();

            //左边黑色小圆
            mt.beginPath();
            mt.arc(100, 60, 20, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
            mt.fillStyle = '#000';
            mt.fill();

            //右边白色小圆
            mt.beginPath();
            mt.arc(100, 140, 20, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
            mt.fillStyle = '#fff';
            mt.fill();
        },
        toArrayMap(array, key = 'code', value = 'name') {
            let map = {};
            if (value === '*') {
                array.forEach(item => {
                    map[item[key]] = item;
                });
            } else {
                array.forEach(item => {
                    map[item[key]] = item[value];
                });
            }
            return map;
        },
        infos() {
            this.$Sev.post("/nodejs/api/intro", {}, (data) => {
                var map = this.toArrayMap(infoTypes)
                data.forEach( s => {
                    this.info.push({'k':map[s.id],'v':s.val});
                })
            });

        },
        skills() {
            this.$Sev.post("/nodejs/api/skill", {}, (data) => {
                data.forEach((element) => {
                    this.danmus.push({
                        name: element.name,
                        jn: element.jn,
                    });
                });
            });
        },
        initWork() {
            this.$Sev.post("/nodejs/api/works", {}, (data) => {
                data.forEach((element) => {
                    this.works.push({
                        name: element.name,
                        position: element.position,
                        time: element.time,
                        result: element.result.split("@@"),
                    });
                    // this.loading=true
                });
            });
        },
    },
    created() {
        this.skills();
    },
    mounted() {
        //打字机效果
        this.dazi = new Typed("#typed", {
            strings: ["万千猿军一将，心怀架构梦想。", "虽知前路难行，难挡心中执念。", "铭记天道酬勤，天下何事难为！", "莫问后世成败，但求今生无悔。"],
            typeSpeed: 90,
            lifeLike: false,
            showCursor: false,
            loop: true,
        });
        this.infos();
        this.initWork();
        this.$nextTick(()=>{
            this.initCanvas();
        })
    },
}


</script>
<style>
@import "../../public/static/kico.css";
@import "../../public/static/moreduo.css";
@import "https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css";

.jt{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #000;
    margin: auto ;
    padding-top: 10px;
}

.gradient-text {
    color: transparent;
    background: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #2a2928 75%, #20e050 100%);background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: auto;
}
.copyrights {
    text-indent: -9999px;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
}

#typed {
    text-align: center;
    display:block;
    min-height: 20px;

}
.mytj {
    /*  此样式只会动画添加样式无实际作用*/
    width:200px;
    height: 200px;
    animation:turn 3s linear infinite;
    box-shadow: 4px 6px 6px #eb9c26;
    border-radius: 50%;
}
.wmytj{
    text-align: center;
    display:block;
}
@keyframes turn {
    0% {
        -webkit-transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(90deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(270deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@media screen and (max-width: 1980px) {
    /* 当屏幕小于或等于 600px 时应用样式 */
    .danmkdul {
        width: 1200px;
        height: 200px;
    }
}
@media screen and (max-width: 500px) {
    /* 当屏幕小于或等于 600px 时应用样式 */
    .danmkdul {
        width: 400px;
        height: 200px;
    }
}
::-webkit-scrollbar {  /*隐藏滚轮*/
    display: none;
}
</style>